<script setup>
import {
  getDeptList,
  addDept,
  getDeptById,
  updateDept,
  deleteDept,
} from "@/api/dept";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";

// 变量声明
// 部门列表
const deptList = ref([]);
// 表单引用
const formRef = ref(null);
// 表单标题
const formTitle = ref("");
// 表单数据
const deptForm = ref({
  name: "",
});
// 对话框可见性
const dialogVisible = ref(false);
// 表单验证规则
const rules = {
  name: [
    { required: true, message: "请输入部门名称", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],
};

// 数据获取
const findAll = async () => {
  const res = await getDeptList();
  if (res.code) {
    deptList.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// 新增部门
const add = () => {
  // 清除验证信息
  if (formRef.value) {
    formRef.value.clearValidate(); // 确保 formRef 已初始化
  }
  deptForm.value = {};
  formTitle.value = "新增部门";
  dialogVisible.value = true;
};

// 编辑操作
const handleEdit = async (id) => {
  // 清除验证信息
  if (formRef.value) {
    formRef.value.clearValidate(); // 确保 formRef 已初始化
  }
  const res = await getDeptById(id);
  if (res.code) {
    deptForm.value = res.data;
  }
  formTitle.value = "修改部门";
  dialogVisible.value = true;
};

// 保存操作
const save = async () => {
  await formRef.value.validate();
  let res = null;
  if (deptForm.value.id) {
    res = await updateDept(deptForm.value);
  } else {
    res = await addDept(deptForm.value);
  }
  if (res.code) {
    ElMessage.success("保存成功");
    deptForm.value = { name: "" };
    dialogVisible.value = false;
    findAll();
  } else {
    ElMessage.error(res.msg);
    dialogVisible.value = false;
  }
};

// 删除操作
const handleDelete = (id) => {
  ElMessageBox.confirm("此操作将永久删除该部门, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deleteDept(id);
    if (res.code) {
      ElMessage.success("删除成功");
      findAll();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 生命周期钩子
onMounted(() => {
  findAll();
});
</script>

<template>
  <h1>部门管理</h1>
  <br />
  <div class="mb-4">
    <el-button type="primary" size="large" :icon="Plus" @click="add"
      >新增部门</el-button
    >
  </div>
  <br />
  <el-table :data="deptList" border style="width: 100%">
    <el-table-column type="index" label="序号" align="center" width="70" />
    <el-table-column prop="name" label="部门名称" align="center" />
    <el-table-column prop="createTime" label="创建时间" align="center" />
    <el-table-column prop="updateTime" label="最后操作时间" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          size="medium"
          @click="handleEdit(scope.row.id)"
        >
          修改
        </el-button>
        <el-button
          type="danger"
          size="medium"
          @click="handleDelete(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="formTitle" v-model="dialogVisible" width="30%">
    <el-form :model="deptForm" :rules="rules" ref="formRef">
      <el-form-item prop="name" label="部门名称">
        <el-input
          v-model="deptForm.name"
          placeholder="请输入部门名称"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="save"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
h1 {
  /* 宋体 */
  font-family: "SimSun";
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
</style>
